<template>
    <div class="footerContainer">
        <div class="footer-content">
            <div class="logo-left">
                <div class="logo-wrapper">
                    <img :src="getAssets('image/weatherIcon.png')" alt="weather icon">
                    <p>中国气象局官方网站</p>
                </div>
            </div>
            <div class="footer-center">
                <div class="nav-links">
                    <a href="#" v-for="(item, index) in btmNavData" :key="index">{{ item.label }}</a>
                </div>
                <div class="info-text">
                    <p>主办：中国气象局公共气象服务中心 中国气象局气象宣传与科普中心（中国气象报社）协办：国家气象信息中心</p>
                    <p>中国气象局总机：010-68406114 网站值班电话：010-68409797（8：00-17：00）</p>
                    <p>网站标识码bm54000001 京ICP备05004897号 京公安备案 110401027001465号</p>
                </div>
            </div>
            <div class="logo-right">
                <div class="logo-wrapper">
                    <img :src="getAssets('image/weatherIcon2.png')" alt="weather icon 2">
                    <!-- <p>警务专区</p> -->
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import { getAssets } from '../utils/index';
const btmNavData = ref([
    { label: '关于我们', path: '' },
    { label: '版权声明', path: '' },
    { label: '网站地图', path: '' },
    { label: '联系我们', path: '' },
    { label: '往期回顾', path: '' },
]);
</script>

<style lang="scss" scoped>
.footerContainer {
    width: 100%;
    background-color: #F5F5F5;
    border-top: 3px solid #0464CA;
    padding: 10px 0;
    height: 130px;

    .footer-content {
        width: 1200px;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 100%;

        .logo-left, .logo-right {
            width: 200px;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            
            .logo-wrapper {
                text-align: center;
                
                img {
                    width: 50px;
                    height: 50px;
                    object-fit: contain;
                }

                p {
                    margin: 0;
                    font-size: 12px;
                    color: #444;
                }
            }
        }

        .footer-center {
            flex: 1;
            padding: 0 40px;
            text-align: center;

            .nav-links {
                margin-bottom: 15px;
                
                a {
                    color: #444;
                    text-decoration: none;
                    padding: 0 15px;
                    position: relative;
                    font-size: 14px;

                    &:not(:last-child)::after {
                        content: '|';
                        position: absolute;
                        right: -3px;
                        top: 50%;
                        transform: translateY(-50%);
                        color: #999;
                    }

                    &:hover {
                        text-decoration: underline;
                    }
                }
            }

            .info-text {
                color: #444;
                font-size: 12px;
                line-height: 2;

                p {
                    margin: 0;
                }
            }
        }
    }
}

@media screen and (max-width: 1200px) {
    .footerContainer {
        .footer-content {
            width: 90%;
            padding: 0 20px;
        }
    }
}
</style>